<template>
  <ui-container class="transfer-single-detail">
    <div class="header-title">
      <span>{{ headerTitle }}</span>
    </div>
    <ui-collapse v-model="activeNames">
      <ui-collapse-item name="1" v-loading="isLoading">
        <template slot="title">
          <span>
            转账进度-{{ $msg('dealStateDict')[resultInfo.dealState] }}
            <a class="refresh" @click.stop="qryResultInfo" v-if="dealStates.includes(resultInfo.dealState)">刷新</a>
          </span>
        </template>
        <vx-result-step :resultInfo="resultInfo" :name="$msg('dealNameDict')[payerInfo.dealName]"></vx-result-step>
      </ui-collapse-item>
      <ui-collapse-item title="转账详情" name="2" class="mg-top-20">
        <div class="payment-info mg-top-20">
          <vx-transfer
            :payerName="payerInfo.PayerAcName"
            :payerNum="payerInfo.PayerAcNo"
            :payerBankName="payerInfo.PayerBankName"
            :payerMoney="payerInfo.TotalFee"
            :payerService="payerInfo.TotalFee"
            :payee="payerInfo.PayeeAcName"
            :payeeNum="payerInfo.PayeeAcNo"
            :payeeBankName="payerInfo.PayeeBankName"
          >
            <div class="res-info">
              <p>
                <span class="res-info-title">转账附言:</span>
                <span class="res-info-text">{{ payerInfo.UserType }}</span>
              </p>
              <p>
                <span class="res-info-title">汇款类型:</span>
                <span class="res-info-text">{{ $msg('remitTypeDict')[payerInfo.remitType] }}</span>
              </p>
              <p>
                <span class="res-info-title">短信通知:</span>
                <span class="res-info-text">{{ payerInfo.Phone | formatStringFilter([3, 4, 4]) }}</span>
              </p>
            </div>
          </vx-transfer>
        </div>
      </ui-collapse-item>
    </ui-collapse>
    <div class="justify-center mg-top-20">
      <ui-button class="primary-long-btn" @click="goback">返回</ui-button>
      <ui-button class="danger-long-btn" @click="showUndoDialog" v-if="payerInfo.dealState == 1 || payerInfo.dealState == 9">撤销</ui-button>
    </div>
    <vx-tips>
      <p>1、本功能适用于企业从已加挂我行企业网银账户向他行进行转账。</p>
      <p>2、跨行转账的服务时间以人民银行支付系统服务时间为准，目前小额支付系统提供7*24小时服务，大额支付系统提供5*8小时服务（9：00-17：00）</p>
    </vx-tips>
    <!-- 撤销弹框 -->
    <vx-dialog
      :loading="isBtnLoading"
      message="确定撤销这笔交易吗？"
      v-model="showConf"
      @confirm="undoTransfer"
      @cancel="undoTransferData = null"
    ></vx-dialog>
    <!-- 撤销结果弹框 -->
    <vx-dialog auto-hide :icon="undoResIcon" :message="undoResMsg" v-model="showSure"></vx-dialog>
  </ui-container>
</template>

<script>
import resultApi from '@/api/components.js';
import transferRemitApi from '@/api/transferRemit';

export default {
  data() {
    return {
      dealStates: ['1', '2', '7', '8', '9', '10', '15'], // 交易状态满足以上时,展示刷新按钮
      timer: '',
      isBtnLoading: false,
      isLoading: false,
      status: [0, 1, 2], // 客户状态
      payerInfo: this.getData().payerInfo || {}, // 转账信息
      activeNames: ['1', '2'], // 折叠菜单
      undoResMsg: '',
      undoResIcon: 'warning', // 撤销结果弹框图标
      undoTransferData: null,
      showConf: false, // 撤销弹框是否显示
      showSure: false, // 撤销结果弹框是否显示
      resultInfo: {}, // 转账结果
    };
  },
  created() {
    this.qryResultInfo();
  },
  methods: {
    // 查询转账进度
    async qryResultInfo() {
      try {
        this.isLoading = true;
        let res = await resultApi.getResultQry(this.payerInfo);
        this.resultInfo = res.data;
      } catch (err) {
        this.$message.error(err.message);
      } finally {
        this.isLoading = false;
      }
    },
    // 撤销弹框控制
    showUndoDialog() {
      this.undoTransferData = this.payerInfo.PayerAcNo;
      this.showConf = true;
    },
    // 撤销操作确认
    async undoTransfer() {
      try {
        this.isBtnLoading = true;
        let res = await transferRemitApi.transferUndo(this.undoTransferData);
        if (res.status === '0') {
          this.undoResMsg = '撤销成功';
          this.undoResIcon = 'success';
          this.timer = setTimeout(() => {
            this.goback();
          }, 3000);
        } else {
          this.undoResMsg = '撤销失败';
          this.undoResIcon = 'warning';
        }
        // 展示自动消失弹框
        this.showSure = true;
      } catch (err) {
        this.$message.error(err.message);
      } finally {
        this.isBtnLoading = false;
      }
    },
    goback() {
      this.$router.back();
    },
  },
  beforeDestroy() {
    this.clearData();
    clearTimeout(this.timer);
  },
};
</script>
